<template>
  <div>
    <!-- 页面标题 -->
    <el-card class="header-card">
      <div class="header-section">
        <div class="title-section">
          <i class="el-icon-setting" style="color: #409EFF; margin-right: 8px;"></i>
          <span class="page-title">参数配置</span>
        </div>
      </div>
    </el-card>
    
    <!-- 配置表单 -->
    <el-card class="config-card">
      <el-form
        ref="configForm"
        :model="config"
        :rules="formRules"
        label-width="150px"
        @submit.native.prevent="saveConfig"
      >
        <el-form-item label="项目名称" prop="BucketName">
          <el-input
            v-model="config.BucketName"
            placeholder="请输入项目名称"
            style="width: 400px;"
          ></el-input>
        </el-form-item>
        
        <el-form-item label="Minio服务器地址" prop="MinioUrl">
          <el-input
            v-model="config.MinioUrl"
            placeholder="请输入Minio服务器地址"
            style="width: 400px;"
          ></el-input>
        </el-form-item>
        
        <el-form-item label="AccessKey" prop="AccessKey">
          <el-input
            v-model="config.AccessKey"
            type="password"
            placeholder="请输入AccessKey"
            style="width: 400px;"
            show-password
          ></el-input>
        </el-form-item>
        
        <el-form-item label="SecretKey" prop="SecretKey">
          <el-input
            v-model="config.SecretKey"
            type="password"
            placeholder="请输入SecretKey"
            style="width: 400px;"
            show-password
          ></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button
            type="primary"
            :loading="submitting"
            @click="saveConfig"
            size="medium"
          >
            保存配置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { GetParam, SaveParam } from '@/api/Param'

export default {
  name: 'ParamConfig',
  data() {
    return {
      submitting: false,
      config: {
        BucketName: '',
        MinioUrl: '',
        AccessKey: '',
        SecretKey: '',
        Id: '',
        CreateTime: '',
        Url: '',
        Api: ''
      },
      // 表单验证规则
      formRules: {
        BucketName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ],
        MinioUrl: [
          { required: true, message: '请输入Minio服务器地址', trigger: 'blur' },
         
        ],
        AccessKey: [
          { required: true, message: '请输入AccessKey', trigger: 'blur' }
        ],
        SecretKey: [
          { required: true, message: '请输入SecretKey', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.loadConfig()
  },
  methods: {
    // 加载配置
    async loadConfig() {
      try {
        const response = await GetParam()
        if (response && response.Data) {
          this.config = {
            BucketName: response.Data.BucketName || '',
            MinioUrl: response.Data.MinioUrl || '',
            AccessKey: response.Data.AccessKey || '',
            SecretKey: response.Data.SecretKey || '',
            Id: response.Data.Id || '',
            CreateTime: response.Data.CreateTime || '',
            Url: response.Data.Url || '',
            Api: response.Data.Api || ''
          }
        }
      } catch (error) {
        console.error('获取参数配置失败:', error)
        this.$message.error('获取参数配置失败')
      }
    },
    
    // 保存配置
    async saveConfig() {
      this.$refs.configForm.validate(async (valid) => {
        if (!valid) return
        
        this.submitting = true
        try {
          const response = await SaveParam(this.config)
          if (response && response.IsSuccess) {
            this.$message.success('配置已成功保存')
          } else {
            throw new Error(response.Message || '保存失败')
          }
        } catch (error) {
          console.error('保存参数配置失败:', error)
          this.$message.error(error.message || '保存失败')
        } finally {
          this.submitting = false
        }
      })
    }
  }
}
</script>

<style scoped>
.header-card {
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #ebeef5;
}

.header-card:hover {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12);
}

.header-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title-section {
  display: flex;
  align-items: center;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.config-card {
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #ebeef5;
}

.config-card:hover {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12);
}

/* 表单项样式 */
.el-form-item {
  margin-bottom: 22px;
}

.el-form-item__label {
  font-weight: 500;
  color: #606266;
}

/* 输入框样式 */
.el-input {
  width: 100%;
}

.el-input__inner {
  border-radius: 4px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.el-input__inner:focus {
  border-color: #409eff;
  outline: 0;
}

/* 按钮样式 */
.el-button {
  min-width: 120px;
  padding: 12px 20px;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .config-card {
    margin: 0 10px;
  }
  
  .el-form-item {
    margin-bottom: 18px;
  }
  
  .el-button {
    width: 100%;
  }
}

/* 表单验证错误样式 */
.el-form-item.is-error .el-input__inner {
  border-color: #f56c6c;
}

.el-form-item__error {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
}
</style>